<template>
  <div class="body">
    <h3>立项依据:</h3>
    <div class="innovativeTraining" v-if="num === 0">
      <div v-for="(item, index) in innovativeTraining" :key="index" class="marginTopBottom">
        <p><i>*</i>{{ item.name }}:</p>
        <!-- <MyEditor></MyEditor> -->
        <el-input
          v-model="item.value"
          maxlength="300"
          style="width: 100%"
          :placeholder="item.name"
          show-word-limit
          type="textarea"
          rows="8"
          class="partition"
        />
      </div>
    </div>
    <div class="entrepreneurshipTraining" v-else-if="num === 1">
      <div v-for="(item, index) in entrepreneurshipTraining" :key="index" class="marginTopBottom">
        <p><i>*</i>{{ item.name }}:</p>
        <!-- <MyEditor></MyEditor> -->
        <el-input
          v-model="item.value"
          maxlength="300"
          style="width: 100%"
          :placeholder="item.name"
          show-word-limit
          type="textarea"
          rows="8"
          class="partition"
        />
      </div>
    </div>
    <div class="entrepreneurshipPractice" v-else>
      <div v-for="(item, index) in entrepreneurshipPractice" :key="index" class="marginTopBottom">
        <p><i>*</i>{{ item.name }}:</p>
        <!-- <MyEditor></MyEditor> -->
        <el-input
          v-model="item.value"
          maxlength="300"
          style="width: 100%"
          :placeholder="item.name"
          show-word-limit
          type="textarea"
          rows="8"
          class="partition"
        />
      </div>
    </div>

    <el-button @click="next">切换</el-button>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
const num = ref(0)
// import MyEditor from '@/components/MyEditor.vue'
const innovativeTraining = reactive([
  { name: '（一）研究目的', value: '' },
  { name: '（二）研究内容', value: '' },
  { name: '（三）国、内外研究现状和发展动态', value: '' },
  { name: '（四）创新点与项目特色', value: '' },
  { name: '（五）技术路线、拟解决的问题及预期成果', value: '' },
  { name: '（六）项目研究进度安排', value: '' },
  { name: '（七）已有基础--1.与本项目有关的研究积累和已取得的成绩', value: '' },
  { name: '（七）已有基础--2.已具备的条件，尚缺少的条件及解决方法', value: '' }
])

const entrepreneurshipTraining = reactive([
  { name: '（一）项目来源', value: '' },
  {
    name: '（二）行业及市场前景  （行业历史与前景，市场规模及增长趋势，行业竞争对手，未来市场销售预测等。）',
    value: ''
  },
  {
    name: '（三）创新点与项目特色  （项目情况，技术水平，产品或模式的创新性、先进性和独特性，竞争优势。）',
    value: ''
  },
  {
    name: '（四）生产或运营  （生产或运营方式，材料、劳动力、设备需求，质量保证，生产成本。）',
    value: ''
  },
  { name: '（五）投融资方案 ', value: '' },
  { name: '（六）管理模式  （合作计划，实施方案，机构设置，人员管理，销售策略等。）', value: '' },
  { name: '（七）风险预测及应对措施', value: '' },
  { name: '（八）效益预测  （未来三年至五年的销售收入、利润、资产回报率等。）', value: '' }
])

const entrepreneurshipPractice = reactive([
  { name: '（一）实体运行机构名称或公司注册名称', value: '' },
  { name: '（二）创业计划书摘要', value: '' },
  { name: '（三）项目背景', value: '' },
  { name: '（四）行业及市场前景', value: '' },
  { name: '（五）产品技术或服务内容', value: '' },
  { name: '（六）商业模式（创业过程、机会与商业分析）', value: '' },
  { name: '（七）团队组建', value: '' },
  { name: '（八）财务情况', value: '' },
  { name: '（九）预期效益分析', value: '' },
  { name: '（十）投融资计划', value: '' },
  { name: '（十一）风险防范', value: '' }
])

const next = () => {
  num.value = num.value++ > 1 ? (num.value = 0) : num.value++
  console.log(innovativeTraining)
}
</script>

<style lang="less" scoped>
.body {
  margin: 20px 40px;
  padding: 30px 40px;
  .team {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    margin-top: 40px;
  }
  h3 {
    color: #196adc;
    margin-bottom: 20px;
  }
  p {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 20px;
    i {
      color: red;
      margin-right: 5px;
    }
  }
  .marginTopBottom {
    margin: 50px 0;
  }
}
</style>
